<template>
	<view class="u-page">
		<up-list @scrolltolower="scrolltolower">
			<up-list-item v-for="(item, index) in indexList" :key="index">
				<view class="list-item">
					<view class="info">
						<text class="shop">{{ item.shopName }} - {{ total }} - {{ index + 1 }}</text>
						<text class="date">{{ item.date }}</text>
					</view>

					<view class="money">
						<text class="prefix">+</text>
						<text class="value">{{ item.money }}</text>
					</view>
				</view>
			</up-list-item>
			<up-list-item>
				<view v-if="loading" class="is-loading">
					<up-loading-icon></up-loading-icon>
				</view>
				<view v-if="isFinished" class='is-finished'>
					<text>- 没有更多了 -</text>
				</view>
			</up-list-item>
		</up-list>
	</view>
</template>

<script setup>
	import api from '@/api/app.js'
	
	const loading = ref(false)
	const total = ref(0)
	const indexList = ref([]);
	const isFinished = ref(false)
	let page = 1
	const size = 10

	const scrolltolower = () => {
		loadmore();
	};

	const loadmore = () => {
		if (isFinished.value) {
			return
		}
		loading.value = true
		api.incomeList({
			page,
			size,
		}).then((res) => {
			total.value = res.data.total
			indexList.value = indexList.value.concat(res.data.list)
			if (indexList.value.length >= total.value) {
				isFinished.value = true
			}
		}).finally(()=> {
			loading.value = false
		})
	};

	onLoad(() => {
		loadmore();
	});
</script>

<style lang="scss">
	.list-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 16px;
		border-bottom: 1px solid #f8f8f8;
	}

	.money {
		display: flex;
		align-items: center;
		margin-bottom: 5px;
		color: #ff9800;

		.prefix {
			font-size: 12px;
		}

		.value {
			font-size: 22px;
		}
	}

	.info {
		display: flex;
		flex-direction: column;

		.shop {
			margin-bottom: 5px;
			font-size: 14px;
			color: #333;
		}

		.date {
			font-size: 12px;
			color: #999;
		}
	}
	
	.is-loading {
		display: flex;
		justify-content: center;
		padding: 16px 0;
	}

	.is-finished {
		padding: 16px 0;
		font-size: 12px;
		color: #999;
		text-align: center;
	}
</style>